<script lang="ts" setup>
import { ref, watch } from "vue";

const props = defineProps({
    length: Number,
    // page: Number,
    totalVisible: {
        type: Number,
        default: 7
    },
    modelValue: Number
});

const proxy = ref(props.modelValue);

watch(
    () => proxy.value,
    val => {
        console.log("after change", val);
        emit("update:modelValue", val);
    }
);

const emit = defineEmits(["update:modelValue"]);
const onPage = (n: any) => {
    console.log("change page", n);
    proxy.value = n;
};
</script>
<template>
    <div class="text-center">
        <v-pagination size="small" v-model="proxy" :length="length" :total-visible="7" @update:modelValue="onPage"></v-pagination>
    </div>
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
